<div class="m-l nav navbar-nav m-t block" style="width:300px;">
  <span>运维管理 ></span>
  <span>资费策略 </span>
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
    <div class="panel panel-default">
      <div class="panel-body">
        <div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="策略名称" [(ngModel)]="keyWord">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" (click)="search()">查询</button>
                </span>
              </div>
            </div>
            <div class="col-md-6" style="text-align: right">
              <button class="btn btn-info pull-right" (click)="btype=1; myModal.show()">
              新增
            </button>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-hover table-striped">
            <thead>
              <tr>

                <th>策略名称</th>
                <th>单价</th>
                <!-- <th>租赁方式</th> -->
                <!-- <th>大号单价</th>
                <th>中号单价</th>
                <th>小号单价</th> -->
                <!-- <th>充电单价</th> -->
                <th>操作</th>

              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of data">
                <td>{{item.policy_name}}</td>
                <!-- <td>{{policyType[item.policy_type]}}</td> -->
                <td>{{item.large_price}}元/小时</td>
                <!-- <td>{{item.medium_price}}元/小时</td>
                <td>{{item.small_price}}元/小时</td>
                <td>{{item.charge_price}}元/小时</td> -->
                <td>
                  <button class="btn btn-xs btn-success" (click)="select(item);btype=2;myModal.show()">编辑</button>
                  <button class="btn btn-xs btn-danger" (click)="select(item);btype=3;myModal.show()">刪除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <app-pagination [pageModel]="pageModel" (pageChanged)="getData($event)"></app-pagination>
      </div>
    </div>
  </div>
</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" *ngIf="btype==1">新增</h4>
          <h4 class="modal-title" *ngIf="btype==2">编辑</h4>
          <h4 class="modal-title" *ngIf="btype==3">刪除</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div *ngIf="btype==1||btype==2">
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">策略名称</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入策略名称" [(ngModel)]='selectData.policy_name' [disabled]="btype==2">
                </div>
              </div>
              <!-- <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">租赁方式</label>
                <div class="col-sm-7">
                  <select class="form-control" [(ngModel)]='selectData.policy_type' [disabled]="btype==2">
                  <option value="">请选择</option>
                	<option *ngFor="let item of policyType;index as i"  value="{{i}}">{{item}}</option>
                </select>
                </div>
              </div> -->
              <!-- <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">大号柜子单价</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入大号柜子单价(元/小时)" [(ngModel)]='selectData.large_price'>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">中号柜子单价</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入中号柜子单价(元/小时)" [(ngModel)]='selectData.medium_price'>
                </div>
              </div> -->
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">单价</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入单价(元/小时)" [(ngModel)]='selectData.large_price'>
                </div>
              </div>
              <!-- <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">充电单价</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入充电单价(元/小时)" [(ngModel)]='selectData.charge_price'>
                </div>
              </div> -->
            </div>
            <div  *ngIf="btype==3">
              <div style="background-color: #e5e5e5;border:1px solid #e5e5e5;padding: 10px;font-size: 14px;border-radius: 5px;font-weight: bold;">
                你确定要删除策略 <span class="text-lg">{{selectData.policy_name}}</span> 吗？
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-info confirm-btn" *ngIf="btype==1" (click)="createPolicy()">保存</button>
          <button class="btn btn-success confirm-btn" *ngIf="btype==2" (click)="updatePolicy()">保存</button>
          <button class="btn btn-danger confirm-btn" *ngIf="btype==3" (click)="deletePolicy()">保存</button>
          <button class="btn  confirm-btn " (click)="cancel();">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>